<template>
    <view class="app">
        <load :ready="ready"></load>
		
		<view class="form-wrap">
			<u-form :model="form"  ref="uForm" labelPosition="top" :error-type="['message','border-bottom']" label-width="160">
				<u-form-item :border-bottom="false" label="优惠价名称" prop="couponName">
					<view class="cont">
						
					<u-input type="text" v-model="form.couponName" placeholder="请输入优惠劵名称"></u-input>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" label="有效期" prop="startTime">
						<view class="cont">
							<view class="item-date">
								<image src="/static/icon_date.png"  @click="showDate=true" class="icon-date" mode="widthFix"></image>
								<u-input  @click="showDate=true" v-model="form.startTime" type="select" placeholder="开始日期"></u-input>
							</view>
							<text style="color: #666; padding: 0 5px;">至</text>
							<view class="item-date">
								<image src="/static/icon_date.png"  @click="showDate2=true" class="icon-date" mode="widthFix"></image>
								<u-input  @click="showDate2=true"  v-model="form.endTime"  type="select" placeholder="结束日期"></u-input>
							</view>
						</view>
				</u-form-item>
				
				<u-form-item :border-bottom="false" label="发行数量" prop="number">
					<view class="cont">
						
					<u-input type="number" v-model="form.number" placeholder="请输入"></u-input>
					<text>张</text>
					</view>
				</u-form-item>
				
				<u-form-item :border-bottom="false" label="优惠金额" prop="couponPrice">
					<view class="cont">
						
					<u-input type="number" v-model="form.couponPrice" placeholder="请输入"></u-input>
					<text>元</text>
					</view>
				</u-form-item>
				
				<u-form-item :border-bottom="false" label="每人可领取数量" prop="quantity">
					<view class="cont">
						
					<u-input type="number" v-model="form.quantity" placeholder="请输入"></u-input>
					</view>
				</u-form-item>
				
				
				<u-form-item :border-bottom="false" label="类型">
						
					
					<u-radio-group v-model="form.isThreshold">
						<u-radio :disabled="item.disabled" v-for="(item, index) in typeList" :key="index" :name="item.id" >
							<view class="type-wrap" v-if="item.id != 1">
								<text>满</text>
								<view class="inp">
									<u-input type="number" v-model="form.min" placeholder="请输入"></u-input>
								</view>
								<text style="color: #497CD0;">元</text>
								
							</view>
							<text v-else>{{ item.name }}</text>
						</u-radio>
					</u-radio-group>
					<text slot="right">可用</text>
				</u-form-item>
				
				<u-form-item label="首页展示" labelPosition="left">
					<u-switch slot="right" v-model="form.isHome" active-color="#497CD0"></u-switch>
				</u-form-item>
				<u-form-item label="上架状态" labelPosition="left">
					<u-switch slot="right" v-model="form.isGround" active-color="#497CD0"></u-switch>
				</u-form-item>
			</u-form>
		</view>
		
		<u-gap height="160"></u-gap>
		<view class="btnbox fixed">
			<u-button type="primary" shape="circle" @click="submit()" :loading="isLoading" :custom-style="btnStyle">{{id ? '确定编辑' : '确定添加'}}</u-button>
		</view>
		
		<u-picker v-model="showDate" mode="time" @confirm="confirmDate($event, 'startTime')"></u-picker>
		<u-picker v-model="showDate2" mode="time" @confirm="confirmDate($event, 'endTime')"></u-picker>
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
import ups from '@/components/base/ups.vue';

let that;
export default {
    mixins: [mixinsBase],
    components: {
		ups
	},
    data() {
        return {
            ready: false,
			action:'',
			showDate:false,
			showDate2:false,
			btnStyle: {
				...this.$config.btnStyle,
				width:'100%'
			},
			form:{
				isThreshold:1,
				isGround:true,
				isHome:false,
			},
			typeList: [
				{
					id:1,
					name: '无门槛',
					disabled: false,
				},
				{
					id:0,
					name: '满',
					disabled: false,
				},
			],
			id:null,
			isLoading: false,
			
			rules: {
				couponName: [
					{
						required: true,
						message: '优惠价名称',
						trigger: ['blur', 'change']
					}
				],
				startTime: [
					{
						required: true,
						message: '开始日期',
						trigger: ['blur', 'change']
					}
				],
				endTime: [
					{
						required: true,
						message: '结束日期',
						trigger: ['blur', 'change']
					}
				],
				number: [
					{
						required: true,
						message: '发行数量',
						trigger: ['blur', 'change']
					}
				],
				couponPrice: [
					{
						required: true,
						message: '优惠金额',
						trigger: ['blur', 'change']
					}
				],
				quantity: [
					{
						required: true,
						message: '每人可领取数量',
						trigger: ['blur', 'change']
					}
				]
			},
      
		};
    },
    onLoad(o) {
        that = this;
		if(o.id){
			this.id = o.id
			uni.setNavigationBarTitle({
				title:'编辑优惠劵'
			})
			this.getInit();
		} else{
			this.ready = true
		}
    },
   onReady() {
   		this.$refs.uForm.setRules(this.rules);
   	},
    onShow() {
        // #ifdef H5
        this.$common.h5SetTitle('');
        // #endif
    },
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		async getInit(){
			let res = await this.$api.agencyCouponInfo({
				id:this.id
			});
			if (res.data.code == this.$config.RESOK) {
				let form = res.data.data;
				form.isGround = form.isGround ? true : false
				form.isHome = form.isHome ? true : false
				form.number = '' + form.number;
				form.couponPrice = '' + form.couponPrice;
				form.quantity = '' + form.quantity;
				this.form = form;
				this.ready=true
			} else {
				this.$message.error(res.data.msg);
			}
		},
		confirmDate(e, name){
			this.$set(this.form, name, `${e.year}-${e.month}-${e.day}`)
		},
		radioGroupChange(){
			
		},
		radioChange(){
			
		},
		handleTab(e){
			this.tab = e;
		},
		change(e){
			this.current = e;
		},
        async submit() {
            console.log('submit')
			let istrue = true
            this.$refs.uForm.validate(valid => {
				console.log(valid);
                if (valid) {
                    console.log('验证通过');
                } else {
                    console.log('验证失败');
					istrue = false
                }
            });
			console.log('istrue', istrue);
			if(!istrue)return
			this.isLoading = true
			let res;
			if(this.id){
				res = await this.$api.agencyCouponEdit({
					...this.form,
					idt:this.id,
					isGround:this.form.isGround ? 1 : 0,
					isHome:this.form.isHome ? 1 : 0,
				 });
			} else{
				res = await this.$api.agencyCouponAdd({
					...this.form,
					isGround:this.form.isGround ? 1 : 0,
					isHome:this.form.isHome ? 1 : 0,
				 });
			}
			this.isLoading=false;
			 if (res.data.code == this.$config.RESOK) {
				 this.$common.showTip(res.data.msg);
				 setTimeout(() => {
					 uni.navigateBack()
				 }, this.$config.timeLoad);
			 } else{
				this.$message.error(res.data.msg);
			 }
        },
        ...mapActions([])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style>
page{
	background: #fff;
}
</style>
<style scoped lang="scss">
.cont{
	background: #f5f5f5;
	display: flex;
	width: 100%;
	border-radius: 8px;
	padding: 2px 20rpx;
}
.form-wrap{
	padding: 0 30rpx;
	.qtext{
		font-size: 14px;
		line-height: 1.6;
	}
}
.item-date{
	position: relative;
	display: flex;
	align-items: center;
}
.icon-date{
	width: 18px;
	height: 18px;
	margin-right: 4px;
}
.type-wrap{
	display: flex;
	align-items: center;
	.inp{
		background: #f5f5f5;
		width: 120px;
		padding: 0 5px;
		margin: 0 5px;
	}
}
</style>
